import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:share_fit/app/controllers/home/exercise_records/logic.dart';
import 'package:share_fit/app/controllers/home/exercise_records/model/exercise_type.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/generated/locales.g.dart';


class ExerciseTypePage extends StatelessWidget {
  ExerciseTypePage({super.key});

  final logic = Get.find<ExerciseRecordsLogic>();

  @override
  Widget build(BuildContext context) {
    return Opacity(
      opacity: 0.9,
      child: Material(
        child: Container(
          color: Colors.black,
          padding: EdgeInsets.symmetric(vertical: 60.w, horizontal: 30.w),
          child: Column(
            children: [
              GestureDetector(
                onTap: () => Get.back(result: logic.state.selectedExerciseType),
                child: Wrap(
                  spacing: 15.w,
                  crossAxisAlignment: WrapCrossAlignment.center,
                  children: [
                    Text(LocaleKeys.exercise_records_title.ts, style: TextStyle(fontSize: 45.sp, color: Colors.white)),
                    Image.asset('assets/images/home/triangle.png', width: 40.w, height: 40.h),
                  ],
                ),
              ),
              SizedBox(height: 60.w),
              GridView.builder(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                itemCount: logic.state.exerciseTypes.length,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  mainAxisSpacing: 30.w,
                  crossAxisSpacing: 30.w,
                  childAspectRatio: 1,
                ),
                itemBuilder: (context, index) {
                  return _buildExerciseTypeItem(logic.state.exerciseTypes[index]);
                },
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildExerciseTypeItem(ExerciseType type) {
    return GestureDetector(
      onTap: () {
        logic.changeExerciseType(type);
        Get.back();
      },
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white70.withOpacity(1),
          borderRadius: BorderRadius.all(Radius.circular(60.r)),
          image: const DecorationImage(image: AssetImage('assets/images/home/rectangle.png'), fit: BoxFit.fill),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Image.asset(type.image!, width: 170.w, height: 170.h),
            SizedBox(height: 40.h),
            Text(type.getTypeName, style: TextStyle(fontSize: 45.sp)),
          ],
        ),
      ),
    );
  }
}
